/**
* 检测历史
*/
<template>
	<view>
		<cu-custom bgColor="v-bg-main v-font-white" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">检测历史</block>
		</cu-custom>
		<view class="cu-bar search bg-white">
			<view class="search-form round" style="background-color: #FFFFFF;border: #CECECE solid 3upx;">
				<text class="cuIcon-search"></text>
				<input @focus="InputFocus" @blur="InputBlur" v-model="maternalName" :adjust-position="false" type="text" placeholder="搜索产妇姓名" confirm-type="search"></input>
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow-blur round" style="background-color: #FD9FC3;" @click="search">搜索</button>
			</view>
		</view>
		<view class="listview-container">
			<block v-for="(item,index) in list" :key="index">
				<view class="playlog-item">
					<view class="dotline">
						<view class="line"></view>
						<view class="dot"></view>
					</view>
					<view class="content" :data-key="item.info.checkId" :data-checkResult="item.score.checkResult" @click="details">
						<text class="course">{{item.info.createTime}}</text>
						<view class="chapter">
							<view style="width: 95%;">
								<view>姓名：{{item.info.maternalName}}</view>
								<view>检测时间：{{item.info.createTime}}</view>
								<view v-if="item.score.checkResult==3">面诊：{{item.report.face.result}}</view>   
								<view v-if="item.score.checkResult==3">舌诊：{{item.report.tongue.result}}</view> 
								<view  v-if="item.score.checkResult==3">检测结果：{{item.score.report}}</view>
								<view  v-else>检测结果：检测失败</view>
							</view>
							<view class="arrow right-arrow" style="width: 5%;">
								<view class="left"></view>
							</view>
						</view>
					</view>
				</view>
			</block>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				maternalName:'',
				flag: false,
				InputBottom: 0
			}
		},
		onLoad() {
			this.init();
		},
		onPullDownRefresh() {
			const that = this;
			that.list = [];
			that.page = 1;
			that.flag = false;
			that.init();
		},
		onReachBottom() {
			that.init();
		},
		methods: {
			InputFocus(e) {
				this.InputBottom = e.detail.height
			},
			InputBlur(e) {
				this.InputBottom = 0
			},
			search(){
				const that = this;
				that.list = [];
				that.page = 1;
				that.flag = false;
				that.init();
			},
			details(e){
				if(e.currentTarget.dataset.checkresult != 3){
					uni.showToast({icon: 'none',title: "检测失败无法查看报告"});
					return;
				}
				uni.navigateTo({
					url: '../report/report?checkId='+ e.currentTarget.dataset.key
				})
			},
			init(){
				const that = this;
				if(that.flag){
					return;
				}
				const url = that.$profile.url + "/console/main/rewrite/getHisList";
				const data = {
					maternalName:that.maternalName,
					maternalName_searchType:'like',
					page:that.page,
					rows:10
				}
				that.$http.post(url,data).then(res=>{
					uni.stopPullDownRefresh();
					if(res.data.length < 1){
						that.flag = true;
						return;
					}
					for (var i = 0; i < res.data.length; i++) {
						if(res.data[i].score.checkResult==3){
							res.data[i].report.tongue.result = res.data[i].report.tongue.result.replace(/#/g,"、");
						}
					}
					that.list = res.data;
					that.page = that.page + 1;
				});
			}
		}
	}
</script>

<style scoped>
	/*时间轴*/
	/*外部容器*/
	.listview-container {
		margin: 10rpx 10rpx;
	}

	/*行样式*/

	.playlog-item {
		display: flex;
	}

	/*时间轴*/

	.playlog-item .dotline {
		width: 35px;
		position: relative;
	}

	/*竖线*/

	.playlog-item .dotline .line {
		width: 1px;
		height: 100%;
		background: #ccc;
		position: absolute;
		top: 0;
		left: 15px;
	}

	/*圆点*/

	.playlog-item .dotline .dot {
		width: 11px;
		height: 11px;
		background: #30ac63;
		position: absolute;
		top: 10px;
		left: 10px;
		border-radius: 50%;
	}

	/*时间戳*/

	.playlog-item .dotline .time {
		width: 100%;
		position: absolute;
		margin-top: 30px;
		z-index: 99;
		font-size: 12px;
		color: #777;
		text-align: center;
	}

	/*右侧主体内容*/

	.playlog-item .content {
		width: 100%;
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #ddd;
		margin: 3px 0;
	}

	.arrow {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	/*章节部分*/

	.playlog-item .content .chapter {
		font-size: 30rpx;
		line-height: 68rpx;
		color: #444;
		white-space: normal;
		padding-right: 10px;
		display: flex;
	}

	/*课程部分*/

	.playlog-item .content .course {
		font-size: 28rpx;
		line-height: 56rpx;
		color: #999;
	}

	/*左箭头*/
	.left {
		position: absolute;
		transform: rotate(180deg)
	}

	.left:before,
	.left:after {
		position: absolute;
		content: '';
		border-top: 10px transparent dashed;
		border-left: 10px transparent dashed;
		border-bottom: 10px transparent dashed;
		border-right: 10px #fff solid;
	}

	.left:before {
		border-right: 10px #0099CC solid;
	}

	.left:after {
		left: 1px;
		/*覆盖并错开1px*/
		border-right: 10px #fff solid;
	}
</style>
